<template>
    <div class="public_main_style">
        <!-- ETable -->
        <ETable ref="table" :columns="columns" :getData="getTableData" rowKey="menuId">
            <template slot="head">
                <el-button
                        @click="editUserInfo('','add')"
                        type="primary"
                        size="small"
                        icon="el-icon-circle-plus"
                >新增菜单</el-button>
            </template>
            <template slot="types" slot-scope="{row}">
                <el-tag size="small" v-if="row.type == '0'" type="success">目录</el-tag>
                <el-tag size="small" v-else-if="row.type == '1'">菜单</el-tag>
                <el-tag size="small" v-else>按钮</el-tag>
            </template>
            <template slot="handler" slot-scope="{row}">
                <el-link type="primary" @click="editUserInfo(row,'edit')">修改</el-link>
                <el-link class="ml10" type="primary" @click="editUserInfo(row,'next')">新增下级</el-link>
                <el-link class="ml10" type="danger" @click="deleteInfo(row)">删除</el-link>
            </template>
        </ETable>

        <!--添加修改菜单-->
        <addMenuModel
                ref="addMenuModel"
                :data="rowData"
                :types="types"
                @success="updataTableList"
        />
    </div>
</template>

<script>
    import addMenuModel from './components/addMenuModel'

    export default {
        data() {
            return {
                rowData: null,
                types: 'add',
                filters: {
                    name: ''
                },
                columns: [
                    {
                        prop: 'menuName',
                        label: '菜单名称',
                        align: 'left'
                    },
                    {
                        prop: 'icon',
                        label: '菜单图标'
                    },
                    {
                        prop: 'type',
                        label: '菜单类型',
                        slotName: 'types'
                    },
                    {
                        prop: 'menuUrl',
                        label: '路由地址'
                    },
                    {
                        prop: 'perms',
                        label: '权限表示'
                    },
                    {
                        prop: 'orderNum',
                        label: '排序'
                    },
                    {
                        label: '操作',
                        slotName: 'handler'
                    }
                ]
            }
        },
        components: {
            addMenuModel
        },
        created() {
            this.$store.dispatch('getDictlists', 'base_param')
        },
        methods: {
            //获取列表数据
            async getTableData(arg) {
                return (
                    await this.$http.post('/cms/auth/menu/list', {
                        params: { ...arg, ...this.filters },
                    })
                )
            },
            //修改菜单
            editUserInfo(row, type) {
                this.types = type
                if (row && row != '') {
                    this.rowData = row
                } else {
                    this.rowData = null
                }
                this.$refs.addMenuModel.showMenuModal = true
            },
            //删除
            deleteInfo(row) {
                this.$confirm('确定要删除这菜单嘛？', '删除', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                    closeOnClickModal: false,
                }).then(async () => {
                    let res = (await this.$http.post('/cms/auth/menu/delete', row.menuId))
                    if (res && res.code == 0) {
                        this.$stoer.dispatch('updateMenuList').then(() => {
                            this.updataTableList()
                            this.$message.success(res.msg)
                        })
                    }
                })
            },
            //更新列表数据
            updataTableList() {
                this.$refs.table.updateTable()
            }
        }
    }
</script>

<style lang="less" scoped>
</style>
